<template>
  <view class="main">
    <view class="title" data-text="hi～我的人格是：">hi～我的人格是：</view>
    <image class="emj" src="/static/result_icon.png"></image>
    <view class="type flex_a_c" :data-text="result.title">{{ result.title }}</view>
    <view class="tag_title" data-text="你的标签">你的标签</view>
    <view v-if="result.tags" class="tag_cont flex_b_c flex-wrap mt-30 mb-20 pl-56 pr-56">
      <view :class="`tag_item mr-30 tag_${ idx + 1 }`" v-for="(item, idx) in result.tags.slice(0, 3)" :key="item" :data-text="item">{{ item }}</view>
    </view>
    <view v-if="result.tags" class="flex_center">
      <view :class="`tag_item ml-30 mr-30 tag_${ idx + 4 }`" v-for="(item, idx) in result.tags.slice(3)" :key="item" :data-text="item">{{ item }}</view>
    </view>
    <view class="cont pt-20">
      <!-- <view data-text="从小的情感需求：" class="wxml2canvas-item">从小的情感需求：</view>
      <view :data-text="result.desc.childhood" class="wxml2canvas-item">{{ result.desc.childhood }}</view> -->
      <view data-text="在爱情中的模样：" class="wxml2canvas-item">在爱情中的模样：</view>
      <view :data-text="result.desc.love" class="wxml2canvas-item">{{ result.desc.love }}</view>
      <!-- <view data-text="面对潜在的焦虑或挫折情境时：" class="wxml2canvas-item mt-26">面对潜在的焦虑或挫折情境时：</view>
      <view :data-text="result.desc.frustration" class="wxml2canvas-item">{{ result.desc.frustration }}</view> -->
    </view>
    <template v-if="!isGenerate">
      <!-- <view @click="generateSharingCard" class="next_btn mt-50">生成测评海报</view> -->
      <view class="next_btn back_btn mt-50" @click="onBack">返回首页</view>
    </template>
    <template  v-else>
      <view class="tips" data-text="测评结果并不代表实际结果，仅供参考">测评结果并不代表实际结果，仅供参考</view>
      <view class="desc" data-text="快扫码测测，你是什么人格？">快扫码测测，你是什么人格？</view>
      <image class="code"></image>
    </template>
    <view class="wxml2canvas-item logo flex_center mt-90">
      <image class="logo_icon" src="/static/logo@2x.png"></image><text data-text="COOL瓜测评" class="wxml2canvas-item">COOL瓜测评</text>
    </view>
  </view>
  <!-- <wxml2canvas id="aaa" /> -->

  <!-- https://github.com/ChrisChan13/wxml2canvas-2d/tree/main?tab=readme-ov-file -->
</template>
<script setup>

import { ref, reactive, onBeforeMount, onMounted, getCurrentInstance, nextTick  } from "vue"
import { onLoad } from '@dcloudio/uni-app'
const childComponentRef = ref(null);
let result = ref({images: {}, desc: {}})
const { ctx } = getCurrentInstance()
let isGenerate = ref(false)
let testResultArr = reactive([
  {
    type: 1,
    title: "倾注型依附",
    tags: ["中度满意关系", "依赖需求", "控制倾向", "担心不安", "恋爱焦虑"],
    imgs: {
      posterImg: 'https://magic.mirror.source.axeastro.com/appsourse/anxiety.png',
      dynamic: 'https://magic.mirror.source.axeastro.com/appsourse/anxiety.gif',
      static: 'https://magic.mirror.source.axeastro.com/appsourse/anxiety_static.png'
    },
    desc: {
      // childhood: "可能经常无法得到父母正确且即时的回应，着急地期盼与渴望父母的爱",
      love: "对于婚姻和恋爱关系有中度的满意度；倾向于扮演依赖者的角色，需要他人的照顾；经常表现出过度的控制，导致恋人疏远，而这种疏远又加剧了他们的不安全感和担忧，因此他们会进一步加强对恋人的控制以寻求安全感；很难坚信恋爱的稳定性，常常感到焦虑。",
      // frustration: "感到不自在、感到害怕、较不容易调适自己"
    }
  },
  {
    type: 2,
    title: "恐惧型依附",
    tags: ["不满意关系", "恐惧型依恋", "消极情感反应", "亲密回避", "自我评价低"],
    imgs: {
      posterImg: 'https://magic.mirror.source.axeastro.com/appsourse/escape.png',
      dynamic: 'https://magic.mirror.source.axeastro.com/appsourse/escape.gif',
      static: 'https://magic.mirror.source.axeastro.com/appsourse/escape_static'
    },
    desc: {
      // childhood: "可能经常受到父母忽略，因此儘管渴望拥有爱，却不敢对父母抱有期待",
      love: "对婚姻和恋爱关系感到最不满意；倾向于对恋爱进行灾难性的评估，导致持久的消极情感反应和冲突升级；不愿意倾听和处理恋人的烦恼；很少主动与恋人发生亲密的接触。恐惧型依恋模式的恋人内心渴望建立亲密关系，但同时表现出犹豫和抗拒，既想依赖又渴望独立，害怕表达自己却需要陪伴，内心的安全感低，自我评价也低，同时难以完全信任他人，害怕被遗弃。",
      // frustration: "感到麻烦的、压抑的、不太愿意调适自己"
    }
  },
  {
    type: 3,
    title: "轻视型依附",
    tags: ["中度满意关系", "亲密回避", "情感压抑", "冲突回避", "独立追求"],
    imgs: {
      posterImg: 'https://magic.mirror.source.axeastro.com/appsourse/contradiction.png',
      dynamic: 'https://magic.mirror.source.axeastro.com/appsourse/contradiction.gif',
      static: 'https://magic.mirror.source.axeastro.com/appsourse/contradiction_static.png'
    },
    desc: {
      // childhood: "可能偶尔被父母忽略、偶尔被父母满足、偶尔又受到父母情绪虐待，不知道自己能不能被爱，一切都是「未知」",
      love: "在婚姻和恋爱关系中，感到中度满意；不太主动与恋人发生亲密的接触；倾向于回避情感的涉入、自我展示和相互依赖，压抑与依恋相关的想法和情感；避开面对关系中的紧张和冲突；认为恋爱关系无需刻意维持也能保持稳定。回避型恋人难以信任和依赖别人，因此更倾向于追求独立，依靠自己。然而，这种回避只是出于对失望的恐惧。",
      // frustration: "情绪起伏大、易担心害怕、最为困难调适自己"
    }
  },
  { 
    type: 4,
    title: "安全型依附",
    tags: ["高满意度关系", "亲昵舒适感", "信任尊重", "努力维系关系", "积极解决冲突"],
    imgs: {
      posterImg: 'https://magic.mirror.source.axeastro.com/appsourse/safe.png',
      dynamic: 'https://magic.mirror.source.axeastro.com/appsourse/safe.gif',
      static: 'https://magic.mirror.source.axeastro.com/appsourse/safe_static.png'
    },
    desc: {
      childhood: "大多时候都能得到父母正确且即时的回应，对父母也能抱持开放、平等的态度",
      love: "追求更高的关系满意度；享受亲密的时刻，深信彼此的美好愿景；尊重和信任恋人，同时能够包容其含糊和消极的表现；致力于保持亲密关系，投入更多的努力；勇于面对婚姻和恋爱中的矛盾和冲突，以积极乐观的态度解决问题；持开放态度，善于表露真实的自我，坚信爱情能够长久。",
      frustration: "相对自在、适当、有弹性调适自己"
    }
  }
])
onLoad(({ type: answer }) => {
  let type = answer || 1
  result.value = testResultArr.find(item => item.type === type)
})
let onBack = () => {
  uni.redirectTo({ url: '/pages/home/index' })
}


</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  min-height: 100vh;
  background: #fff url('/static/result_bg.png') no-repeat left top/ 100% 362rpx;
  padding-top: 42rpx;
  padding-bottom: calc(36rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(36rpx + env(safe-area-inset-bottom));
}
.title {
  font-weight: bold;
  font-size: 32rpx;
  color: #1E232E;
  line-height: 46rpx;
  text-align: center;
}
.emj {
  width: 196rpx;
  height: 196rpx;
  margin-top: 50rpx;
  display: block;
  margin: 0 auto;
}
.type {
  width: 516rpx;
  height: 86rpx;
  line-height: 86rpx;
  background: url('/static/title_bg.png') no-repeat left top / 100% 100%;
  font-weight: bold;
  font-size: 32rpx;
  color: #1E232E;
  padding-left: 126rpx;
  margin: -14rpx auto 0;
  position: relative;
  z-index: 1;
}
.tag_title {
  height: 44rpx;
  background: url('/static/tag_bg.png') no-repeat center top / 124rpx 100%;
  text-align: center;
  line-height: 44rpx;
  font-size: 32rpx;
  color: #1E232E;
  line-height: 44rpx;
  text-align: center;
  margin: 46rpx auto 0;

}
.tag_cont {
  // text-align: center;
}
.tag_item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 175rpx;
  height: 56rpx;
  line-height: 56rpx;
  border-radius: 23rpx;
  border: 5rpx solid #1E232E;
  &.tag_1 {
    background: #60BD1B;
  }
  &.tag_2 {
    background: #FAC800;
  }
  &.tag_3 {
    background: #CE06DF;
  }
  &.tag_4 {
    background: #FB562B;
  }
  &.tag_5 {
    background: #5E4AFC;
  }
}
.cont {
  font-weight: bold;
  font-size: 21rpx;
  color: #1E232E;
  line-height: 30rpx;
  margin: 47rpx auto 0;
  width: 644rpx ;
  padding: 20rpx 67rpx 39rpx 32rpx;
  background: #F6FFDA;
  border-radius: 20rpx;
  border: 4rpx solid #1E232E;
}
.desc {
  font-weight: bold;
  font-size: 25rpx;
  color: #1E232E;
  line-height: 35rpx;
  text-align: center;
  margin-top: 43rpx;
}
.code {
  width: 161rpx;
  height: 161rpx;
  display: block;
  margin: 85rpx auto 0;
}
.logo {
  font-weight: bold;
  font-size: 25rpx;
  color: #000000;
  line-height: 35rpx;
  text-align: center;
  .logo_icon {
    width: 47rpx;
    height: 47rpx;
    margin-right: 10rpx;
  }
}
.next_btn {
  width: 644rpx;
  height: 90rpx;
  text-align: center;
  line-height: 82rpx;
  font-weight: bold;
  background: #C1FF00;
  color: #1E232E;
  font-size: 32rpx;
  margin: 0 auto;
  border-radius: 100rpx;
  border: 4rpx solid #1E232E;
  &.back_btn {
    background: #1e232eFF;
    color: #fff;
  }
}
.tips {
  text-align: center;
  font-weight: 500;
  font-size: 21rpx;
  color: #D6D6D6;
  line-height: 30rpx;
  margin-top: 30rpx;
}
</style>